//
//  ContentView.swift
//  SwiftUIScrollView
//
//  Created by 李煜 on 2024/7/31.
//

import SwiftUI

struct ContentView: View {
  var body: some View {
    VStack {
      //MARK: 标题
      HStack {
        VStack(alignment: .leading) {
          Text("MONDAY, AUG 20")
            .font(.headline)
            .foregroundStyle(.secondary)
          Text("Your Reading")
            .font(.system(.title, design: .rounded, weight: .black))
        }
//        .background(.blue)
        Spacer()
      }
      .padding([.top, .horizontal]) // 更改标题padding
//      .background(.orange)
//      .ignoresSafeArea(.container, edges: .top)注意此行效果
      
      
      //MARK: 多个卡片
      // 水平滚动
      // 1. 设置水平方向滚动.horizontal
      ScrollView(.horizontal, showsIndicators: false) {
        
        // 2. 容器使用HStack
        HStack { // 假数据不能滚动,视图被压缩
          Group {//群组视图,可以包裹内容视图,并在外部添加修饰器,同步到内部所有视图使用
            CardView(image: "swiftui-button", category: "SwiftUI", heading: "Drawing a Border with Rounded Corners", author: "SIMON NG")
            CardView(image: "macos-programming", category: "macOS", heading: "Building a Simple Editing App", author: "Gabriel Theodoropoulos")
            CardView(image: "flutter-app", category: "Flutter", heading: "Building a Complex Layout with Flutter", author: "Lawrence Tan")
            CardView(image: "natural-language-api", category: "iOS", heading: "What's New in Natural Language API", author: "Sai Kambampati")
          }
          .frame(width: 300) // 设置宽度
        }
      }
      Spacer()
    }
  }
}

#Preview {
  ContentView()
}
